<template>
  <div id="app">
    <SwitchRadio />
    <transition name="ivy-slide-left-enter">
      <router-view class="page" />
    </transition>
    <Sidebar />
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
    SwitchRadio: () => import('@/components/switch-radio'),
    Sidebar: () => import('@/components/sidebar')
  }
}
</script>

<style lang="scss">
@import '@/styles/button.scss';
@import '@/styles/frostedGlass.scss';

html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td,
img,
span,
button {
  padding: 0;
  margin: 0;
}

#app,
body {
  height: 100vh;
  overflow: hidden; /* Safari */ /* IE 10+ and Edge */
  user-select: none; /* 选中文字时避免出现蓝色背景 */
}

#app {
  .ivy-slide-left-enter-active,
  .ivy-slide-left-leave-active {
    transition: all 1s ease;
  }

  .ivy-slide-left-enter-from,
  .ivy-slide-left-leave-to {
    opacity: 0;
    transform: translateX(-80%);
    transform-origin: top left;
  }

  .ivy-slide-left-enter-to,
  .ivy-slide-left-leave-from {
    opacity: 1;
    transform: translateX(0);
    transform-origin: top left;
  }

  .page {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    margin: 0 auto;
  }
}

// 模态框全局样式设置
#modals-container {
  .vm--container {
    .vm--modal {
      @include glass;
      // 设置字幕样式
      .type-writer {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;

        .curtainCall {
          font-size: 20px;
          line-height: 2em;
          color: #fff;
          text-align: center;
        }
      }
    }
  }
}

// 视频button居中显示
.video-play-container {
  .video-player {
    .video-js {
      .vjs-big-play-button {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}

// 由于模态框直接挂载到body,这里将局部样式移入到全局样式，请勿改动
.file-switch {
  display: flex;
  align-items: center;
  justify-content: space-around;

  @include waves;
}
</style>
